"use client"

import type React from "react"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Search, Play, Pause } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface Song {
  id: number
  title: string
  artist: string
  cover: string
  duration: string
  url?: string
  file?: File
}

interface MusicPickerProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSelect: (song: Song) => void
}

// 模拟的音乐数据
const mockSongs: Song[] = [
  {
    id: 1,
    title: "外婆话",
    artist: "陆泽",
    cover: "/placeholder.svg",
    duration: "03:00",
  },
  {
    id: 2,
    title: "90S",
    artist: "ICE杨长青/Gibb-Z/TrickYzb",
    cover: "/placeholder.svg",
    duration: "03:00",
  },
  {
    id: 3,
    title: "我最闪亮",
    artist: "张含韵",
    cover: "/placeholder.svg",
    duration: "03:30",
  },
]

export function MusicPicker({ open, onOpenChange, onSelect }: MusicPickerProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [playingId, setPlayingId] = useState<number | null>(null)
  const [externalFile, setExternalFile] = useState<File | null>(null)

  const filteredSongs = mockSongs.filter(
    (song) =>
      song.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      song.artist.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  const togglePlay = (songId: number) => {
    setPlayingId(playingId === songId ? null : songId)
  }

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setExternalFile(file)
    }
  }

  const handleExternalFileSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (externalFile) {
      onSelect({
        id: Date.now(),
        title: externalFile.name,
        artist: "未知艺术家",
        cover: "/placeholder.svg",
        duration: "未知",
        file: externalFile,
      })
      onOpenChange(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl">
        <DialogHeader>
          <DialogTitle>选择音乐</DialogTitle>
        </DialogHeader>
        <Tabs defaultValue="internal">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="internal">平台音乐</TabsTrigger>
            <TabsTrigger value="external">上传音乐</TabsTrigger>
          </TabsList>
          <TabsContent value="internal">
            <div className="relative mb-4">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="搜索音乐"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <div className="space-y-4 max-h-[60vh] overflow-y-auto">
              {filteredSongs.map((song) => (
                <div key={song.id} className="flex items-center space-x-4 p-2 rounded-lg hover:bg-accent">
                  <div className="relative w-16 h-16 flex-shrink-0">
                    <img
                      src={song.cover || "/placeholder.svg"}
                      alt={song.title}
                      className="w-full h-full object-cover rounded-md"
                    />
                    <Button
                      variant="secondary"
                      size="icon"
                      className="absolute inset-0 m-auto h-8 w-8 opacity-0 group-hover:opacity-100 hover:opacity-100"
                      onClick={() => togglePlay(song.id)}
                    >
                      {playingId === song.id ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                    </Button>
                  </div>
                  <div className="flex-1 min-w-0">
                    <h4 className="font-medium truncate">{song.title}</h4>
                    <p className="text-sm text-muted-foreground truncate">{song.artist}</p>
                  </div>
                  <div className="text-sm text-muted-foreground">{song.duration}</div>
                  <Button onClick={() => onSelect(song)}>选择</Button>
                </div>
              ))}
            </div>
          </TabsContent>
          <TabsContent value="external">
            <form onSubmit={handleExternalFileSubmit} className="space-y-4">
              <div className="space-y-2">
                <label htmlFor="external-file" className="text-sm font-medium">
                  上传音乐文件
                </label>
                <Input id="external-file" type="file" accept="audio/*" onChange={handleFileChange} required />
              </div>
              <Button type="submit">添加外部音乐</Button>
            </form>
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  )
}

